<template>
  <div>
    <text-add-button v-if="!isAllEventsExist()" text="添加事件" @click="handleEventAdd" />
    <el-table :data="eventList" v-if="eventList.length">
      <el-table-column label="事件名" prop="label" align="center" show-overflow-tooltip />
      <el-table-column label="事件方法" prop="value" align="center" show-overflow-tooltip />
      <el-table-column label="操作" min-width="100px" align="center">
        <template #default="scope">
          <text-edit-button text="编辑" @click="handleEventEdit(scope.row)" />
          <text-delete-button @click="handleEventDelete(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <custom-event-setting
      v-model="showDialog"
      v-if="showDialog"
      :data="localData"
      :curEvents="curEvents"
      :eventName="curEventName"
      :eventType="curEventType"
      :options="formJson"
      @update-event="handleEventUpdate"
    />
  </div>
</template>

<script>
import customEventSetting from '../../components/customEventSetting.vue';

export default {
  name: 'ConfigEvents',
  components: { customEventSetting },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    curEvents: {
      type: Array,
      default: undefined
    },
    formJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // events: ['change', 'click'],
      showDialog: false,
      curEventName: '',
      curEventType: '',
      options: {
        fullScreen: true,
        minimap: {
          enabled: false
        }
      },
      localData: {}
    };
  },
  computed: {
    eventList() {
      const list = [];
      if (this.curEvents && this.curEvents.length) {
        for (let key in this.localData) {
          const events = this.curEvents.map((e) => e.value);
          // 将每一个事件名称还原再筛选
          if (events.indexOf(key.replace('_', '')) > -1) {
            if (key.includes('_')) {
              const item = this.curEvents.find((i) => i.value == key.replace('_', ''));
              list.push({
                label: item.label,
                value: key.replace('_', ''),
                type: 'call'
              });
            } else {
              const item = this.curEvents.find((i) => i.value == key);
              list.push({
                label: item.label,
                value: key,
                type: 'code'
              });
            }
          }
        }
      }
      return list;
    }
  },
  watch: {
    data: {
      handler(newVal) {
        this.localData = newVal;
      },
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.curEvents.forEach((e) => {
    //     const { value } = e;
    //     this.$watch(
    //       `localData.${value}`,
    //       (val) => {
    //         try {
    //           this.localData[value] = typeof val == 'string' ? eval(val) : val;
    //         } catch (err) {
    //           console.error('events error!', err);
    //         }
    //       },
    //       {
    //         immediate: true
    //       }
    //     );
    //   });
    // });
  },
  methods: {
    handleEventEdit(row) {
      this.showDialog = true;
      this.curEventName = row.value;
      this.curEventType = row.type;
    },
    handleEventDelete(row) {
      if (row.type == 'code') {
        delete this.localData[row.value];
      } else {
        delete this.localData[`_${row.value}`];
      }
    },
    handleEventAdd() {
      this.showDialog = true;
      this.curEventName = '';
      this.curEventType = 'code';
    },
    handleEventUpdate(event, type, func) {
      if (event && type && func) {
        if (type == 'call') {
          delete this.localData[event];
          this.localData[`_${event}`] = func;
        } else {
          delete this.localData[`_${event}`];
          this.localData[event] = func;
        }
      } else {
        this.msgError('无效的事件配置！');
      }
    },
    // 判断是否所有事件都存在
    isAllEventsExist() {
      return this.eventList.length == this.curEvents.length;
    }
  }
};
</script>
